<!--  -->
<template>
  <div id='componentsForTabs'>
    <div class="tab tabIner" v-for="(item,index) in listArr" :key="index" >
      <div class="tabIcon">
        <i class="el-icon-close"></i>
      </div>
      {{item.name}}
    </div>
  </div>
</template>

<script>
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      defaultIndex: 0,
      listArr: [
        {
          name: '设备管理',
          ischecked: false
        },
        {
          name: '王国列表大收到'
        },
        {
          name: '设备'
        },
        {
          name: '设备理'
        }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  }
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
#componentsForTabs {
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #DDDDDD;
  .tab {
    width: fit-content;
    padding: 0 10px;
    height: 48px;
    line-height: 48px;
    cursor: pointer;
    position: relative;
    min-width: 100px;
    text-align: center;
    .tabIcon {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 5px;
      top: -15px;
    }
  }
  .tab:hover{
    color: #FF00FF;
  }
  .tabIner {

  }
}
</style>
